<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>


<script type="text/javascript" src="Content/js/Lib/jquery-1.8.2.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.validate.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.validate.password.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<link rel="stylesheet" type="text/css"
	href="Content/css/Register/index.css" />
<link rel="stylesheet" type="text/css"
	href="Content/css/AccountEdit/index.css" />
<div class="container">
	<ul class="breadcrumb" style="margin-bottom: 10px;">
		<li><a href="home">Trang chủ</a> <span class="divider">/</span></li>
		<li class="active">Đăng ký tài khoản</li>
	</ul>
	<div class="menu">
		<div class="span3" style="width: 204px;">
			<div class="well sidebar-nav">
				<ul class="nav nav-list">
					<li class="menu-title">TÀI KHOẢN CỦA TÔI</li>
					<li><a href="ThongTinChungTaiKhoan.do">Thông tin chung tài khoản</a></li>
					<li class="active"><a href="ThongTinCaNhan.do">Thông tin cá nhân</a></li>
					<li><a href="DoiMatKhau.do">Thay đỗi mật khẩu</a></li>
				</ul>
			</div>
		</div>
	</div>	
	<div class="main_content">
		
		<div class="page-header-register">
			<h4>Chỉnh sửa thông tin tài khoản</h4>
		</div>
		<div class="error-message" id="result-register" style="display:none;">
        	<p>Kiểm tra lại các thông tin</p>
        </div> 
        <p style="margin: 14px 0px 0px 0px;">Bạn có thể điều chỉnh một trong các thông tin dưới đây.</p>
			<fieldset class="group-infor">
				<h4 class="legend">Thông tin cá nhân</h4>
				<ul class="nav">
					<li>
						<div class="input-box">
							<label class="strong">Họ và tên</label>
							<input type="text" name="HoVaTen" id="HoVaTen" />
						</div>
					</li>
					<li>
						<div class="input-box">
							<label class="strong">Địa chỉ email</label>
							<input type="email" name="Email" id="Email" style="float:left;"/>
							<div id="check-email"  class="check-item"></div>
						</div>
					</li>
					<li>
						<div class="day-of-birth">
							<label><strong>Ngày tháng năm sinh</strong></label>
							<div class="input-box">
								<select id="Ngay" name="Ngay" style="width: 56px;">
									<option value="00" selected="selected">--</option>
									<option value="01">1</option>
									<option value="02">2</option>
									<option value="03">3</option>
									<option value="04">4</option>
									<option value="05">5</option>
									<option value="06">6</option>
									<option value="07">7</option>
									<option value="08">8</option>
									<option value="09">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									<option value="13">13</option>
									<option value="14">14</option>
									<option value="15">15</option>
									<option value="16">16</option>
									<option value="17">17</option>
									<option value="18">18</option>
									<option value="19">19</option>
									<option value="20">20</option>
									<option value="21">21</option>
									<option value="22">22</option>
									<option value="23">23</option>
									<option value="24">24</option>
									<option value="25">25</option>
									<option value="26">26</option>
									<option value="27">27</option>
									<option value="28">28</option>
									<option value="29">29</option>
									<option value="30">30</option>
									<option value="31">31</option>
								</select> <label class="label-dob">Ngày</label>
							</div>
							<div class="input-box">
								<select id="Thang" name="Thang" style="width: 56px;">
									<option value="00" selected="selected">--</option>
									<option value="01">1</option>
									<option value="02">2</option>
									<option value="03">3</option>
									<option value="04">4</option>
									<option value="05">5</option>
									<option value="06">6</option>
									<option value="07">7</option>
									<option value="08">8</option>
									<option value="09">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
								</select> <label class="label-dob">Tháng</label>
							</div>
							<div class="input-box">
								<input type="text" style="width: 50px" name="Nam" id="Nam" onkeypress="return isNumberKey(event)"/> <label
									class="label-dob">Năm</label>
							</div>
						</div>
					</li>
					<li>
						<div class="input-box">
							<label class="strong">Địa chỉ liên lạc</label>
							<input type="text" name="DiaChi" id="DiaChi" style="float:left;"/>
						</div>
					</li>
					<li>
						<div class="input-box">
							<label class="strong">Số điện thoại liên lạc</label>
							<input type="text" name="DienThoai" id="DienThoai" style="float:left;" onkeypress="return isNumberKey(event)"/>
							<div id="check-phone" class="check-item"></div>
						</div>
					</li>
				</ul>
			</fieldset>
		<button id="btn-save" class="btn btn-primary">Lưu</button>
	</div>
</div>
<script>
var flagNgay = false;
var flagThang = false;
var flagNam = false;
$('#Ngay').change(function(){
	if($(this).val() != "00")
		{
			flagNgay = true;
			$('#Ngay').css("background-color", "white");
		}
	else
		{
			flagNgay = false;
		}
});
$('#Thang').change(function(){
	if($(this).val() != "00")
		{
			flagThang = true;
			$('#Thang').css("background-color", "white");
		}
	else
	{
		flagThang = false;
	}
});
$('#Nam').change(function(){
	if($(this).val() != "")
		{
			flagNam = true;
			$('#Nam').css("background-color", "white");
		}
	else
	{
		flagNam = false;
	}
});

var flagEmail = true;
var flagPhone = true;
var flagNgaySinh = true;

var cansend = false;

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode;
   if (charCode != 46 && charCode > 31 &&(charCode < 48  || charCode > 57))
      return false;

   return true;
}
$('#Email').change(function(){
	if($(this).val() != "")
		{
			$('#Email').css("background-color", "white");
			var sEmail = $('#Email').val();
	        if ($.trim(sEmail).length == 0) {
	        	$("#check-email").css("color", "red");
    			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Vui lòng điền đúng email');
    			flagEmail = false;
	            e.preventDefault();
	        }
	        if (validateEmail(sEmail)) {
	        	$("#check-email").css("color", "red");
    			$("#check-email").html('');
    			flagEmail = true;
	        }
	        else {
	        	$("#check-email").css("color", "red");
    			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Vui lòng điền đúng email');
    			flagEmail = false;
	            e.preventDefault();
	        }
		}
	else
		{
			$("#check-email").css("color", "red");
			$("#check-email").html('');
			flagEmail = true;
		}
});
$('#btn-save').click(function(){
	
	if($('#DienThoai').val() == "")
	{
		$('#DienThoai').css("background-color", "white");
		flagPhone = true;
	}
	else
	{
		var x=$('#DienThoai').val();
		if ((x.match(/^\d{11}/)) || ((x.match(/^\d{10}/))))
		{
			$("#check-phone").css("color", "red");
			$("#check-phone").html('');
			flagPhone = true;
		}
		else
		{
			$("#check-phone").css("color", "red");
			$("#check-phone").html('<img src="Content/images/Register/error_msg_icon.gif" /> Xin vui lòng kiểm tra lại số điện thoại của bạn (10 - 11 chữ số)');
			$('#result-register').css("display", "block");
			flagPhone = false;
		}
	}
	if ((flagNgay == false && flagThang == false && flagNam == false) || (flagNgay && flagThang && flagNam))
		{
			flagNgaySinh = true;
		}
	else
		{
			if(flagNgay == false)
			{
				$('#Ngay').css("background-color", "#FD9FB9");
			}
			if(flagThang == false)
			{
				$('#Thang').css("background-color", "#FD9FB9");
			}
			if(flagNam == false)
			{
				$('#Nam').css("background-color", "#FD9FB9");
			}
			flagNgaySinh = false;
		}
	if (flagEmail && flagPhone && flagNgaySinh)
		{
		$('#result-register').css("display", "none");
		cansend = true;
		}
	else
		{
		$('#result-register').css("display", "block");
		cansend = false;
		}
	if(cansend)
		{
			var hoVaTen = $('#HoVaTen').val();
			var ngay = $('#Ngay').val();
			var thang = $('#Thang').val();
			var nam = $('#Nam').val();
			var diaChi = $('#DiaChi').val();
			var email = $('#Email').val();
			var dienThoai = $('#DienThoai').val();
			
			var dataPackage = "HoVaTen=" + hoVaTen + "&Ngay=" + ngay + "&Thang=" + thang + "&Nam=" + nam
			+ "&DiaChi=" + diaChi + "&Email=" + email + "&DienThoai=" + dienThoai;
			
			$.ajax({
		        type: "POST",
		        datetype: "html",
		        url: "ThongTinCaNhan.do",
		        data: dataPackage,
		        async: false,
		        success: function(response){
		        	if(response == "success")
		        		{
			        		var delay = 2000; //Your delay in milliseconds
			        		$('#alert-success').css("display", "block");
			        		setTimeout(function(){ window.location = 'ThongTinChungTaiKhoan.do'; }, delay);
		        		}
		        	else
		        		{
		        		var delay = 2000; //Your delay in milliseconds
		        		$('#alert-fail').css("display", "block");
		        		setTimeout(function(){ $('#alert-fail').css("display", "none"); }, delay);
		        		}
		        	
		        },
		         error: function(e){
		        	 alert('Quá trình cập nhật gặp lỗi. Vui lòng thử lại sau');
		         }
		    });			
		}
});
</script>